<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <teleport to="body">
      <div v-if="show" class="modal">
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
      </div>
    </teleport>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false)
const title = ref('Hello, World!')
const content = ref('This is a modal window.')

</script>

<style scoped>
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem;
  border: 1px solid black;
}
</style>